<template>
  <div class="compile">
    <van-nav-bar
      title="客户详情"
      right-text="首页"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="compile_tou">
      <van-image round width="5rem" height="5rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      <div class="compile_right">
        <h3>{{custName}}</h3>
        <p @click="compileFn">编辑信息</p>
      </div>
    </div>
    <div class="compile_body">
      <h4>基本信息</h4>
      <ul>
        <li>
          客户名称
          <span>{{custName}}</span>
        </li>
        <li>
          联系电话
          <span>{{telephone}}</span>
        </li>
        <li>
          学历
          <span>{{education}}</span>
        </li>
        <li>
          性别
          <span>{{sex}}</span>
        </li>
        <li>
          年龄
          <span>{{age}}</span>
        </li>
        <li>
          所属城市
          <span>{{cityName}}</span>
        </li>
        <li>
          公司名称
          <span>{{company}}</span>
        </li>
        <li>
          职位
          <span>{{position}}</span>
        </li>
        <li>
          录入时间
          <span>{{createTime}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
 
<script>
import { getCustId } from "../../request/api";
export default {
  data() {
    return {
        age:"",
        custName:"",
        company:"",
        cityName:"",
        education:"",
        telephone: "",
        sex:"",
        position:"",
        createTime:""


    };
  },
  created() {
    //   console.log(this.$route.params.id);
    getCustId({
        id:this.$route.params.id
    }).then((res) => {
      console.log(res);
      if(res.errCode == 0){
          let {age,custName,company,cityName,education,telephone,sex,position,createTime} = res.data;
          this.age = age;
          this.custName = custName;
          this.company = company;
          this.cityName = cityName;
          this.education = education;
          this.telephone = telephone;
          this.sex = sex;
          this.position = position;
          this.createTime = createTime
      }
    });
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {},
    compileFn(){
      this.$router.push("/clientadd/" + this.$route.params.id)
    }
  },
};
</script>
 
<style lang = "less" scoped>
.compile {
    background: #f3f3f3;
    /* padding-bottom: 10px; */
  /* position: relative; */
  .van-nav-bar {
    background: #369eff;
    /deep/.van-icon-arrow-left::before {
      color: #fff;
    }
    /deep/.van-nav-bar__text {
      color: #fff;
    }
    /deep/.van-nav-bar__title {
      color: #fff;
    }
  }
  .compile_tou {
    background: hsl(209, 100%, 61%);
    width: 100%;
    height: 150px;
    padding: 25px 16px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .compile_right {
      margin-left: 10px;
      flex: 1;
      display: flex;
      justify-content: space-between;
      color: #fff;
    }
  }
  .compile_body {
    /* position: absolute; */
    width: 84%;
    height: 430px;
    background: #fff;
    margin: 0 auto;
    margin-top: -25px;
    border-radius: 5%;
    padding: 5px 10px;
    li {
      color: #ccc;
      margin: 8px 0;
      span {
        color: #000;
        margin-left: 10px;
      }
    }
  }
}
</style>